<template>
	<view class="container">
		<block v-if="isload">
			<view class="form">
				<view>
					<textarea class="sb-area" v-model="sbarea" placeholder="[粘贴识别] 请在这里粘贴内容"></textarea>
					<button class="sb-btn" :style="{ background: t('color1') }" @tap="infoCheck">识别</button>
				</view>
			</view>


			<form @submit="formSubmit">
				<view class="form">
					<view class="form-item">
						<text class="label">姓 名</text>
						<input class="input" type="text" placeholder="请输入姓名"
							placeholder-style="font-size:28rpx;color:#BBBBBB" name="name" :value="name"></input>
					</view>
					<view class="form-item" v-if="showCompany">
						<text class="label">公 司</text>
						<input class="input" type="text" placeholder="请输入公司或单位名称"
							placeholder-style="font-size:28rpx;color:#BBBBBB" name="company" :value="company"></input>
					</view>
					<view class="form-item">
						<text class="label">手机号</text>
						<input class="input" type="number" placeholder="请输入手机号"
							placeholder-style="font-size:28rpx;color:#BBBBBB" name="tel" :value="tel"></input>
					</view>
					<!-- type==1 -->
					<view class="form-item" v-if="false">
						<text class="label flex0">选择位置</text>
						<text class="flex1" style="text-align:right" :style="area ? '' : 'color:#BBBBBB'"
							@tap="locationSelect">{{ area ? area : '请选择您的位置' }}</text>
						<view class="sl-main">
							<image class="sl-icon" :src="static_url + '/static/img/juli.png'" @tap="locationSelect" />
							<view class="sl-tip" :style="{ color: t('color1') }">定位</view>
						</view>
						<!--selectzuobiao <input class="input" type="text" placeholder="请选择您的位置" placeholder-style="font-size:28rpx;color:#BBBBBB" name="area" :value="area" @tap="selectzuobiao"></input> -->
					</view>
					<view class="form-item form-item-loca" v-else>
						<text class="label flex1">所在地区</text>
						<uni-data-picker :localdata="items" :border="false" :placeholder="regiondata || '请选择省市区'"
							@change="regionchange" ref="picker"></uni-data-picker>
						<!-- <picker mode="region" name="regiondata" :value="regiondata" class="input" @change="bindPickerChange">
						<view class="picker" v-if="regiondata">{{regiondata}}</view>
						<view v-else>请选择地区</view>
					</picker> -->
						<view class="sl-main" @tap="locationSelect">
							<image class="sl-icon" :src="static_url + '/static/img/juli.png'" />
							<view class="sl-tip" :style="{ color: t('color1') }">定位</view>
						</view>

					</view>
					<view class="form-item">
						<text class="label">{{ t('详细地址') }}</text>
						<input class="input" type="text" :placeholder="'请输入' + t('详细地址')"
							placeholder-style="font-size:28rpx;color:#BBBBBB" name="address" :value="address"></input>
					</view>

					<!-- 					<view class="flex-y-center" ><input type="text" disabled placeholder="请选择门店坐标"
							name="zuobiao" :value="latitude ? latitude+','+longitude:''"></input></view> -->
				</view>
				<!-- <button class="chooseL" @tap="locationSelect">手动选择定位</button> -->
				<button class="savebtn" :style="'background:' + t('color1') + ''" form-type="submit">保 存</button>
				<!-- <button class="testbtn" :style="'background:'+t('color1')+''" @tap="testbtn">test</button> -->
			</form>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>
<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			name: '',
			tel: '',
			area: '',
			address: '',
			longitude: '',
			latitude: '',
			regiondata: '',
			type: 0,
			addressxx: '',
			company: '',
			items: [],
			showCompany: false,
			setData: {
				params: null,
				data: null
			},
			sbarea: '',
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
		};
	},

	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.type = this.opt.type || 0;
		var that = this;

		app.get('Index/getCustom', {}, function (customs) {
			var url = app.globalData.static_url + '/static/area.json';
			uni.request({
				url: url,
				data: {},
				method: 'GET',
				header: {
					'content-type': 'application/json'
				},
				success: function (res2) {
					that.items = res2.data
				}
			});
		});


		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	methods: {

		//开始识别地址
		infoCheck: function () {
			var that = this;
			that.loading = true;
			console.log('that.sbarea: ', that.sbarea);
			app.post('address/shibie', {
				address: that.sbarea
			}, function (res) {
				console.log('res: ', res);
				that.loading = false;

				if (res.status == "201") {
					app.error(res.msg);
				}

				that.name = res.data.name ? res.data.name : that.name;
				that.tel = res.data.phone ? res.data.phone : that.tel;
				that.address = res.data.detail ? res.data.detail : that.address;
				if (res.data.province) {
					that.$refs.picker.clear();
					var regiondata = res.data.province + ',' + res.data.city + ',' + res.data.district;
					var area = res.data.province + ',' + res.data.city + ',' + res.data.district;
				} else {
					var regiondata = '';
				}
				that.regiondata = regiondata;
				that.loaded();
			});
		},

		// 选择地址
		locationSelect: function () {
			var that = this;
			uni.chooseLocation({
				success: function (res) {
					console.log('地址: ', res);
					// address:"广东省广州市天河区珠江新城花城大道68号"
					// distance:undefined
					// errMsg:"chooseLocation:ok"
					// latitude:23.118104
					// longitude:113.32725
					// name:"环球都会广场"
					// that.info.address = res.name;
					// that.info.latitude = res.latitude;
					// that.info.longitude = res.longitude;
					// that.address = res.name;
					// that.latitude = res.latitude;
					// that.longitude = res.longitude;

					// 使用正则表达式匹配省、市、区和详细地址
					const match = res.address.match(/^(.*?(省|自治区|特别行政区))?(.*?市)?(.*?(区|县|旗))?(.*)$/);


					if (match) {
						let province = match[1] || ''; // 省或自治区
						let city = match[3] || ''; // 市
						let district = match[4] || ''; // 区、县或旗
						let address = match[6].trim(); // 详细地址

						console.log("province", province);
						console.log("city", city);
						console.log("district", district);
						console.log("address", address);
						if (province == '' && city != '') {
							province = city;
						}
						that.address = address + res.name;
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						if (province) {
							that.$refs.picker.clear();
							that.regiondata = province + ',' + city + ',' + district;
							that.area = province + ',' + city + ',' + district;

						} else {
							that.regiondata = '';
						}
					} else {
						console.log("地址格式不正确");
					}
				},
				fail(e) {
					console.log('选择位置失败：', e);
				}
			});
		},

		testbtn: function () {
			this.$refs.picker.clear();
		},

		getdata: function () {
			var that = this;
			var addressId = that.opt.id || '';
			app.get('Index/getCustom', {}, function (customs) {
				if (customs.data.includes('plug_xiongmao')) {
					that.showCompany = true;
				}
			});
			// if(addressId) {
			that.loading = true;
			app.get('Address/addressadd', {
				id: addressId,
				type: that.type
			}, function (res) {
				that.loading = false;
				that.name = res.data.name;
				that.tel = res.data.tel;
				that.area = res.data.area;
				that.address = res.data.address;
				that.longitude = res.data.longitude;
				that.latitude = res.data.latitude;
				that.company = res.data.company;
				if (res.data.province) {
					var regiondata = res.data.province + ',' + res.data.city + ',' + res.data.district;
				} else {
					var regiondata = '';
				}
				that.regiondata = regiondata
				that.loaded();
			});
			// }else{
			// 	that.loaded();
			// }
		},
		regionchange(e) {
			const value = e.detail.value
			console.log(value[0].text + ',' + value[1].text + ',' + value[2].text);
			this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text;
			this.area = value[0].text + ',' + value[1].text + ',' + value[2].text;
		},
		selectzuobiao: function () {
			console.log('selectzuobiao')
			var that = this;
			uni.chooseLocation({
				success: function (res) {
					console.log(res);
					that.area = res.address;
					that.address = res.name;
					that.latitude = res.latitude;
					that.longitude = res.longitude;
				},
				fail: function (res) {
					console.log(res)
					if (res.errMsg == 'chooseLocation:fail auth deny') {
						//$.error('获取位置失败，请在设置中开启位置信息');
						app.confirm('获取位置失败，请在设置中开启位置信息', function () {
							uni.openSetting({});
						});
					}
				}
			});
		},
		formSubmit: function (e) {
			var that = this;
			var formdata = e.detail.value;
			var addressId = that.opt.id || '';
			var name = formdata.name;
			var tel = formdata.tel;
			var regiondata = that.regiondata;

			if (that.type == 1) {
				var area = that.area;
				if (area == '') {
					app.error('请选择位置');
					return;
				}
			} else {
				var area = regiondata;
				if (area == '') {
					app.error('请选择省市区');
					return;
				}
			}
			var address = formdata.address;
			var longitude = that.longitude;
			var latitude = that.latitude;
			var company = formdata.company;

			if (name == '' || tel == '' || address == '') {
				app.error('请填写完整信息');
				return;
			}
			app.showLoading('提交中');
			app.post('Address/addressadd', {
				type: that.type,
				addressid: addressId,
				name: name,
				tel: tel,
				area: area,
				address: address,
				latitude: latitude,
				longitude: longitude,
				company: company
			}, function (res) {
				app.showLoading(false);
				if (res.status == 0) {
					app.alert(res.msg);
					return;
				}
				app.success('保存成功');
				setTimeout(function () {
					app.goback(true);
				}, 1000);
			});
		},
		delAddress: function () {
			var that = this;
			var addressId = that.opt.id;
			app.confirm('确定要删除该收获地址吗?', function () {
				app.showLoading('删除中');
				app.post('Address/del', {
					addressid: addressId
				}, function () {
					app.showLoading(false);
					app.success('删除成功');
					setTimeout(function () {
						app.goback(true);
					}, 1000);
				});
			});
		},
		bindPickerChange: function (e) {
			var val = e.detail.value;
			this.regiondata = val;
		},
		setaddressxx: function (e) {
			this.addressxx = e.detail.value;
		},

	}
};
</script>
<style>
.container {
	display: flex;
	flex-direction: column
}

.addfromwx {
	width: 94%;
	margin: 20rpx 3% 0 3%;
	border-radius: 5px;
	padding: 20rpx 3%;
	background: #FFF;
	display: flex;
	align-items: center;
	color: #666;
	font-size: 28rpx;
}

.addfromwx .img {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.form {
	width: 94%;
	margin: 20rpx 3%;
	border-radius: 5px;
	padding: 0 3%;
	background: #FFF;
}

.form-item {
	display: flex;
	align-items: center;
	width: 100%;
	border-bottom: 1px #ededed solid;
	height: 118rpx;
	overflow: hidden;
}


.form-item-loca {
	padding-right: 75rpx;
}

.form-item:last-child {
	border: 0
}

.form-item .label {
	color: #8B8B8B;
	font-weight: bold;
	height: 60rpx;
	line-height: 60rpx;
	text-align: left;
	width: 160rpx;
	/* min-width: 160rpx; */
	padding-right: 20rpx;
	white-space: nowrap;
}

.form-item .input {
	flex: 1;
	height: 60rpx;
	line-height: 60rpx;
	text-align: right
}

.savebtn {
	width: 90%;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	border-radius: 48rpx;
	color: #fff;
	font-weight: bold;
	margin: 5%;
	margin-top: 100rpx;
	border: none;
	position: absolute;
	bottom: 0;
}

.sl-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 15rpx;
	border-left: 1px solid #ededed;
	min-width: 60rpx;
	background-color: #fff;
	position: absolute;
	right: 40rpx;
	padding: 20rpx;
}

.sl-tip {
	font-size: 22rpx;
	color: #ba1f25;
}

.sl-icon {
	width: 28rpx;
	height: 28rpx;
}

.sb-area {
	width: 100%;
	padding: 3% 0;
}

.sb-btn {
	display: inline-block;
	float: right;
	font-size: 20rpx;
	border: none;
	margin-bottom: 3%;
	border-radius: 5px;
	padding: 0px 10px;
	color: #fff;
	background-color: #ba1f25;
}
</style>